<template>
	<view style="background-image:url('../../static/backgroundXK2.jpg'); ">
		<navbar :search="search" />
		<view class="page-body" style="position: relative;top: 41rpx;">
			<view class="page-section page-section-gap">
				<map style="width:100%;height: 600rpx;" :markers="markers" subkey="IEUBZ-QYBLW-QMRRC-RYRJ4-UXEKV-BXB3E"
					:latitude="latitude" :longitude="longitude" layer-style="2"></map>
				</map>
			</view>
		</view>
		<tender :location="location"></tender>

	</view>
</template>
<script>
	import navbar from "@/components/navbar/navbar.vue"
	import tender from "@/components/tender.vue"
	export default {

		mounted() {
			// uni.getLocation({
			// 		type: 'wgs84',
			// 		success: (res) => {
			// 			console.log(res, "当前位置");
			// 			// this.latitude = res.latitude //当前纬度
			// 			// this.longitude = res.longitude//当前经度
			// 			// uni.request({

			// 			// 	url:'https://apis.map.qq.com/ws/geocoder/v1/?location='+this.latitude+','+this.longitude+'&key=IEUBZ-QYBLW-QMRRC-RYRJ4-UXEKV-BXB3E',
			// 			// 		success:(res)=>{
			// 			// 			console.log(res)
			// 			// 			var staus=res.data.result.ad_info.district
			// 			// 			var staus2=res.data.result.ad_info.city
			// 			// 			console.log("1:"+staus)

			// 			// 			console.log("2:"+staus2)
			// 			// 		}
			// 			// })

			// 		}
			// 	}),
			uni.request({
				url: 'https://apis.map.qq.com/ws/location/v1/ip?key=IEUBZ-QYBLW-QMRRC-RYRJ4-UXEKV-BXB3E',
				success: (res) => {
					console.log(res)
					var staus = res.data.result.ad_info.city
					var staus2 = res.data.result.ad_info.district
					console.log("1:" + staus+" "+staus.length-1)
					this.location=staus.slice(0,staus.length-1)
					console.log("2:" + staus2)
					this.latitude = res.data.result.location.lat
					this.longitude = res.data.result.location.lng
					this.markers = [{
						id: 1,
						latitude: res.data.result.location.lat,
						longitude: res.data.result.location.lng,
						iconPath: '../../static/tabbar/tub.png',
					}]
				}
			})


				uni.request({
					url: "http://101.43.7.172:5678/data-process/getTotality",
					success: (res) => {

						file:///c:/users/administrator/appdata/roaming/360se6/User Data/temp/da6dce86317fcc0c15a823969f8cbdc5_90.pngthis.TotalityData = res.data.data.TotalityData
						console.log(this.TotalityData);

					}
				}),
				uni.request({
					header: {
						'Content-Type': 'application/json'
					},
					url: "http://101.43.7.172:5678/data-process/getDatasByCity",
					method: "POST",
					data: {
						"city": this.location,
						
					},
					success: (res) => {

					}
				})

		},
		data() {
			return {
				id: 0,
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				markers: [],
				location: "上海",
				TotalityData: []


			}
		},
		methods: {
			search(value) {
				console.log(value)
				uni.request({
					header: {
						'Content-Type': 'application/json'
					},
					url: "http://101.43.7.172:5678/data-process/getDatasByCity",
					method: "POST",
					data: {
						"city": value,
						
					},
					success: (res) => {
						if(res.data.data!=false){
							uni.navigateTo({
								url: "/pages/search/search?searchLocation=" + value
							})
						}else{
							uni.navigateTo({
								url: "/pages/search/search2"
							})
						}
					}
				})
				
			}
		},
		components: {
			tender,
			navbar
		}
	}
</script>


<style lang="scss">
	.block {
		opacity: 0.8;
		border-radius: 20%;
		display: flex; //盒子模型
		flex-direction: column; //垂直排列
		float: left;
		justify-content: center;
		align-items: center;
		margin-top: 25rpx;
		margin-left: 25rpx;
		font-family: 楷体;
		background-color: #00253f;
		width: 210rpx;
		height: 210rpx;
		color: #efefef;
	
	}

	.national {
		/* border-color: #5500ff; */
		/* border-width: 50rpx; */
		display: flex; //盒子模型
		flex-direction: row;
		margin-top: 100rpx;
		height: 200rpx;
		color: #ffffff;
	
	}

	.national text {

		//盒子模型
		/*border: #4CD964; */
		left: 110rpx;
		color: #0092D5;
		left: 50rpx;
		margin: 30rpx;
		position: relative;
		top: 22rpx;
		white-space: pre-wrap;
	}

	.national_btn {
		width: 110px;
		height: 34px;
		text-align: center;
		border: 3px solid #0092D5;
		line-height: 34px;
		border-radius: 34px;
		background-color:#01279D;
		font-size: 16px;
	}

	.titleTu {
		margin-left: 300rpx;
		color: #fffffd;
		font-size: 10rpx;
		font-weight: 700;
	}

	.block {
		/* margin-top: 10rpx; */

		position: relative;
		font-size: 38rpx;
		color: #ffffff;
		font-weight: 700;

	}

	.number {
		color: #4e9562;
		position: relative;
		top: 0rpx;
		font-weight: 700;
	}


	.compare text {
		font-size: 30rpx;
	}
	
	      .bgc {
	        background: repeating-conic-gradient(rgb(255, 255, 255), rgb(1, 115, 255), rgb(255, 255, 255) 0.8deg);
	        width: 100%;
	        height: 100%;
			animation: change 3s linear infinite;
	      }
      @keyframes change {
        0% {
			 background: repeating-conic-gradient( rgb(255, 255, 255), rgb(1, 115, 255), rgb(255, 255, 255) 0.8deg);
        }
		15% {
			 background: repeating-conic-gradient( rgb(255, 255, 255), rgb(1, 115, 255), rgb(255, 255, 255) 0.7deg);
		}
        30% {
          background: repeating-conic-gradient( rgb(255, 255, 255), rgb(1, 115, 255), rgb(255, 255, 255) 0.6deg);
        }
		45% {
			 background: repeating-conic-gradient( rgb(255, 255, 255), rgb(1, 115, 255), rgb(255, 255, 255) 0.5deg);
		}
        60% {
          background: repeating-conic-gradient( rgb(255, 255, 255), rgb(1, 115, 255), rgb(255, 255, 255) 0.4deg);
        }
		75% {
			 background: repeating-conic-gradient( rgb(255, 255, 255), rgb(1, 115, 255), rgb(255, 255, 255) 0.3deg);
		}
        90% {
          background: repeating-conic-gradient( rgb(255, 255, 255), rgb(1, 115, 255), rgb(255, 255, 255) 0.2deg);
        }
        100% {
          background: repeating-conic-gradient( rgb(255, 255, 255), rgb(1, 115, 255), rgb(255, 255, 255) 0.1deg);
        }
      }

</style>
